<template>
  <view>
    <bar-title bgColor="bg-cyan" :is-back="false">
      <block slot="content">订单详情</block>
    </bar-title>
    <view class="bg-cyan card-box">
      <view class="status-view" v-if="order.status == -1">
        <view class="text-white text-lg title-view">
          <text class="cuIcon-edit text-xxl margin-right-xs" ></text>申请中
        </view>
        <view class="text-white margin-top-sm" >
          <text>您的订单还未进行押金减免，请及时处理</text>
        </view>
      </view>
    </view>
    <view class="bg-white card-box "  >
      <view class="card-view address-view">
        <view class="text-lg text-bold text-black">物流信息</view>
        <view class="solid-line"></view>
        <view class="cu-list menu-avatar">
          <view class="cu-item">
            <view class="bg-grey icon-view">
              <text class="cuIcon-locationfill"/>
            </view>
            <view class="content">
              <view class="text-black">
                <text>收货人：</text>
                <text>{{ order.consignee }}</text>
                <text class="margin-left">{{ order.phone }}</text>
              </view>
              <view class="text-gray text-sm flex">
                <view >{{order.province_name}}{{order.city_name}}{{order.area_name}}{{order.address}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--商品信息-->
    <view class="bg-white card-box">
      <view class="card-view shop-view">
        <view class="shop-info-view">
          <view class="text-black text-bold text-lg title-view">
            <text class="cuIcon-shop" style="margin-right:10rpx"></text>爱宝租机
          </view>
        </view>
        <view class="goods-list-view">
          <view class="cu-avatar radius" :style="[{backgroundImage:'url('+imgUrl+ order.add_file +')'}]"/>
          <view class="goods-info-view">
            <view class="text-black text-cut name">{{order.title}}</view>
            <view class="text-gray text-sm text-cut introduce">规格：{{order.goods_sku_text}}</view>
            <view class="text-gray text-sm text-cut introduce">数量：1</view>
            <view class="text-price text-red text-lg">{{order.sum_fee}}</view>
          </view>
        </view>

        <view class="solid-line"></view>
        <view class="text-center text-black" @click="kefu">
          <text class="lg text-gray cuIcon-phone" style="margin-right: 8rpx;"/>
          联系客服</view>
      </view>
    </view>
    <!--商品金额-->
    <view class="bg-white card-box">
      <view class="card-view price-view">
        <view class="text-black title-view">
          <view class="title text-lg text-bold">首期实付租金</view>
          <view class="text-right">
            <text class="text-price text-bold">{{ orderItem[0].money }}</text>
          </view>
        </view>
        <view class="solid-line"></view>
        <view class="text-black title-view">
          <view class="title">首期合计</view>
          <view class="text-right">
            <text class="text-price">{{ orderItem[0].money }}</text>
          </view>
        </view>
        <view class="text-black title-view">
          <view class="title">首期租金</view>
          <view class="text-right">
            <text class="text-price">{{ order.first_price }}</text>
          </view>
        </view>
        <view class="text-black title-view">
          <view class="title">运费</view>
          <view class="text-right">
            <text >包邮</text>
          </view>
        </view>
        <view class="text-black title-view">
          <view class="title">押金</view>
          <view class="text-right">
            <text class="text-price">{{ order.screen_price }}</text>
          </view>
        </view>

      </view>
    </view>
    <view class="bg-white card-box">
      <view class="card-view order-view">
        <view class="text-black title-view" @click="onPayList">
          <view class="title text-lg text-bold">还款计划</view>
          <view class="text-right">
            <text class=" text-bold">详情 ></text>
          </view>
        </view>
        <view class="solid-line"></view>
        <view class=" title-view text-gray">
          <view class="title">总租金</view>
          <view class="text-right">
            <text class="text-price">{{ total }}</text>
          </view>
        </view>
        <u-table font-size="26" v-if="orderItem.length > 0">
          <u-tr>
            <u-th>期数</u-th>
            <u-th>预计支付日</u-th>
            <u-th>预计还款金额(元)</u-th>
          </u-tr>
          <u-tr v-for="(item,index) in orderItem" :key="index" >
            <u-td>第{{item.Issues_of}}期</u-td>
            <u-td>{{item.time}}</u-td>
            <u-td>{{item.money}}</u-td>
          </u-tr>
        </u-table>
      </view>
    </view>
    <!--订单信息-->
    <view class="bg-white card-box">
      <view class="card-view order-view">
        <view class="text-lg text-bold text-black">订单信息</view>
        <view class="solid-line"></view>
        <view class="title-view text-gray">
          <view class="title">订单编号</view>
          <view class="text-right">
            <text class="margin-right-xs">{{ order.out_no_pay }}</text>
            <button class="cu-btn sm line-black" @click="copy()">复制</button>
          </view>
        </view>
        <view class=" title-view text-gray">
          <view class="title">下单时间</view>
          <view class="text-right">
            <text>{{ order.pay_time }}</text>
          </view>
        </view>
        <view class=" title-view text-gray" v-if="order.status != -1">
          <view class="title">相关协议</view>
          <view class="text-right" @click="toPdf">
            <text>查看 ></text>
          </view>
        </view>
      </view>
    </view>
    <view class="foot-hight-view"/>
    <view class="bg-white footer-fixed foot-padding-bottom" >
      <button class="cu-btn line-black radius round" @click="cancelOrder" v-if="order.status == -1">取消订单</button>
<!--      <button class="cu-btn bg-red round">继续提交</button>-->
    </view>
  </view>
</template>

<script>
import {cancelOrder, getOrderDetail, getPdf, getPhone} from "../../common/http";
import { mapState } from 'vuex'
import barTitle from "../../components/common/bar-title";
export default {
  name: "detail",
  components: {
    barTitle,
  },
  data(){
    return{
      id:0,
      order:{},
      orderItem:[],
      total:0
    }
  },
  onLoad(option) {
    let options = my.getLaunchOptionsSync();
    if(options.query){
      this.id = options.query.id
    }else{
      this.id = option.id
    }
    this.init()
  },

  computed: {
    ...mapState(['imgUrl']),
  },
  methods:{
    init(){
      getOrderDetail({id:this.id}).then(res=>{
        this.order = res.data.data.order
        this.orderItem = res.data.data.order_item
        this.total = res.data.data.total
      })
    },
    copy(){
      uni.setClipboardData({
        data: this.order.out_no_pay,
        success: function() {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      })
    },
    cancelOrder(){
      cancelOrder({id:this.id}).then(res=>{
        if(res.data.code == 0){
          uni.showToast({
            title: '取消成功',
            icon: 'none'
          });
          setTimeout(()=>{
            uni.navigateBack()
          },2000)
        }
      })
    },
    kefu(){
      getPhone({type: 3}).then((res)=>{
        if(res.data.code == 0) {
          uni.makePhoneCall({
            phoneNumber: res.data.data.explain.trim(),
          });
        }
      });
    },
    toPdf(){
      getPdf({id:this.id}).then(res=> {
        my.downloadFile({
          // 示例 url，并非真实存在
          url: res.data.data,
          success({ apFilePath }) {
            my.openDocument({
              filePath: apFilePath,
              fileType: 'pdf',
              success: (res) => {
                console.log('open document success')
              }
            })
          }
        })
      })
    },
    onPayList(){
      if(this.order.type == 3){
        uni.navigateTo({
          url: '/sub_pages/order/paylist?id='+this.id
        });
      }

    }
  }
}
</script>

<style lang="scss" scoped >
.card-box {
  padding: 27.27rpx 27.27rpx 0;
}
.card-view {
  position: relative;
  border-radius: 9.09rpx;
  padding: 18.18rpx;
  box-shadow: 0 0 14.54rpx #f1f1f1;
}
.goods-ad-view {
  .cu-avatar {
    position: absolute;
    height: 136.36rpx;
    width: 136.36rpx;
  }
  .goods-info-view {
    position: relative;
    padding-left: 154.54rpx;
    padding-right: 145.45rpx;
    height: 136.36rpx;
    .cu-tag {
      font-size: 21.81rpx;
      padding: 0 18.18rpx;
      height: 36.36rpx;
      border-radius: 18.18rpx 3.63rpx;
    }
    .text-black {
      margin-top: 18.18rpx;
      margin-bottom: 7.27rpx;
    }
  }
  .goods-btn-view {
    position: absolute;
    line-height: 136.36rpx;
    height: 136.36rpx;
    right: 18.18rpx;
    top: 18.18rpx;
  }
}
.shop-view {
  position: relative;
  .solid-line {
    margin: 27.27rpx 0;
  }
  .shop-info-view {
    position: relative;
    margin-bottom: 27.27rpx;
    line-height: 47.27rpx;
    height: 47.27rpx;
    margin-top: 0 !important;

    .cu-avatar {
      position: absolute;
    }
    .title-view {
      position: relative;
    }
  }
  .goods-list-view {
    position: relative;
    margin: 18.18rpx 0;
    .cu-avatar {
      position: absolute;
      height: 154.54rpx;
      width: 154.54rpx;
    }
    .goods-info-view {
      position: relative;
      padding-left: 172.72rpx;
      height: 154.54rpx;
      .name {
        position: relative;
        height: 38.18rpx;
        width: 100%;
      }
      .introduce {
        position: relative;
        height: 32.72rpx;
        width: 100%;
      }
      .tag-view {
        position: relative;
        margin-bottom: 9.09rpx;
        margin-top: 7.27rpx;
        height: 33.87rpx;
        width: 100%;
        .cu-tag {
          position: relative;
          top: -2rpx;
        }
      }
      .text-price {
        position: relative;
        height: 36.36rpx;
        width: 100%;
      }
    }
  }
  .foot-view {
    position: relative;
    background: #FFFCFC;
    margin: 0 -18.18rpx -18.18rpx -18.18rpx;
    border-radius: 0 0 9.09rpx 9.09rpx;
    padding: 18.18rpx;
    .left-view {
      position: relative;
      padding-right: 181.81rpx;
      .af5-img {
        position: relative;
        margin-right: 9.09rpx;
        width: 36.36rpx;
        top: 3.63rpx;
      }
    }
    .text-right {
      position: absolute;
      right: 18.18rpx;
      top: 18.18rpx;
    }
  }
}
.price-view {
  position: relative;
  .title-view {
    position: relative;
    margin-bottom: 18.18rpx;
    .title {
      position: relative;
      padding-right: 181.81rpx;
    }
    .text-right {
      position: absolute;
      top: 3.63rpx;
      right: 0;
    }
  }
  .title-right-view {
    position: relative;
    margin-top: 27.27rpx;
    text-align: right;
  }
  .solid-line {
    margin: 27.27rpx 0;
  }
}
.order-view {
  position: relative;
  .solid-line {
    margin: 27.27rpx 0;
  }
  .title-view {
    position: relative;
    margin-bottom: 18.18rpx;
    &:last-child {
      margin-bottom: 12.72rpx;
    }
    .title {
      position: absolute;
      top: 3.63rpx;
      left: 0;
    }
    .text-right {
      position: relative;
      padding-left: 181.81rpx;
      .cu-btn {
        padding: 0 10.9rpx;
        height: 30.9rpx;
        top: -3.63rpx;
      }
    }
  }
}
.address-view {
  position: relative;
  .solid-line {
    margin: 18.18rpx 0;
  }
  .cu-list.menu-avatar>.cu-item {
    //height: 55px;
    &:after {
      width: 0;
      height: 0;
      border-bottom: 0;
    }
    .icon-view {
      position: absolute;
      border-radius: 100%;
      text-align: center;
      line-height: 45.45rpx;
      height: 45.45rpx;
      width: 45.45rpx;
      left: 9.09rpx;
      top: 25.45rpx;
    }
    .content {
      left: 72.72rpx;
      width: calc(100% - 94.54rpx);
    }
  }
}
.status-view{
  position: relative;
  padding: 18.18rpx;
}
.recommend-goods-list-view {
  position: relative;
  .flex-wrap {
    padding: 9.09rpx;
    .basis-df {
      width: 50%;
      padding: 0 9.09rpx;
    }
  }
  .list-itme {
    text-align: center;
    margin-bottom: 18.18rpx;
    .cu-avatar {
      width: 347.27rpx;
      height: 347.27rpx;
    }
    .goods-info-view {
      position: relative;
      padding: 14.54rpx;
      text-align: left;
      .text-price {
        margin: 9.09rpx 0;
      }
      .foot-box {
        position: relative;
        .cu-tag {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }
}
.foot-hight-view {
  width: 100%;
  height: calc((env(safe-area-inset-bottom) / 2) + 109.09rpx);
}
.footer-fixed {
  box-shadow: 0 -3.63rpx 10.9rpx 0 #eaeaea;
  padding: 18.18rpx 27.27rpx;
  text-align: right;
  .cu-btn {
    margin-left: 10px;
  }
}
.cu-modal.bottom-modal {
  .cu-bar {
    min-height: 81.81rpx;
    .title {
      position: relative;
      width: 100%;
    }
    .close {
      position: absolute;
      font-size: 36.36rpx;
      right: 27.27rpx;
    }
  }
  .modal-view {
    position: relative;
    width: 100%;
    .content {
      position: relative;
      text-align: left;
      padding: 27.27rpx 18.18rpx;
      .tel-btn-view {
        position: relative;
        width: 100%;
        .tel-view {
          position: relative;
          padding-right: 163.63rpx;
          line-height: 47.27rpx;
          height: 47.27rpx;
        }
        .cu-btn {
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .code-view {
        position: relative;
        text-align: center;
        .code {
          font-size: 54.54rpx;
        }
        .code + .code {
          margin-left: 18.18rpx;
        }
      }
    }
    .num-lock-view {
      position: relative;
      margin-bottom: -2rpx;
      .solid-top::after {
        border-top: 2rpx solid rgba(0, 0, 0, 0.1);
      }
      .cu-list.grid>.cu-item {
        text {
          color: inherit;
        }
        .num {
          font-size: 40rpx;
        }
        .close {
          font-size: 32.72rpx;
          margin-top: 9.09rpx;
        }
        &:active {
          background-color: #f0f0f0;
        }
      }
    }
  }
}

</style>